<template>
  <div class="contant-warp" mt-8>
    <div class="item" m-8>
      <dv-border-box1 style="height: 25rem"><MainLeft1 /></dv-border-box1>
      <dv-border-box1 style="height: 25rem"><MainLeft2 /></dv-border-box1>
    </div>
    <div class="item" m-8>
      <dv-border-box8 :dur="5" style="height: 50rem">占位</dv-border-box8>
    </div>
    <div class="item" m-8>
      <dv-border-box10 style="height: 15rem"><MainRight1 /> </dv-border-box10>
      <dv-border-box10 style="height: 15rem" mt-6>
        <MainRight2 />
      </dv-border-box10>
      <dv-border-box10 style="height: 19rem" mt-6><MainRight3 /> </dv-border-box10>
    </div>
  </div>
</template>

<script setup></script>
<style scoped lang="scss">
.contant-warp {
  display: flex;
  width: 100%;
  height: auto;
  .item {
    // height: 100%;
  }
}

.item:nth-child(1) {
  flex: 0 1 30%;
}

.item:nth-child(2) {
  display: flex;
  flex: 0 1 40%;
  .title {
    @apply text-21px text-primary flex-center;
  }
}

.item:nth-child(3) {
  flex: 0 1 30%;
}
</style>
